<template>
    <div class="login-container">
        <el-form 
            class="login-form" 
            :model="loginForm" 
            :rules="loginRules"
            >

            <div class="title-container">
                <h3 class="title">用户登录</h3>
            </div>
            <!-- username -->
            <el-form-item 
                prop="username">
                <span class="svg-container">
                    <el-icon>
                        <Avatar />
                    </el-icon>
                </span>
                <el-input placeholder="username" name="username" type="text" v-model="loginForm.username"></el-input>
            </el-form-item>
             <!-- password -->
             <el-form-item prop="password">
                <span class="svg-container" @click="onChangePwdType">
                    <el-icon>
                        <!-- <View /> -->
                        <component :is="pwdType==='password' ? View : Hide"></component>
                    </el-icon>
                    <!-- 使用外部图标 -->
                </span>
                <el-input placeholder="password" name="password" v-model="loginForm.password" :type="pwdType"></el-input>
                <span class="show-pwd" >
                    <el-icon>
                        <Lock />
                    </el-icon>
                </span>
            </el-form-item>
            <!-- 登录按钮 -->
            <el-button type="primary" style="width: 100%; margin-bottom: 30px;">登录</el-button>
        </el-form>
    </div>
  
</template>

<script setup>
// 导入图片组件
// import { Avatar, Hide, Lock, View } from '@element-plus/icons-vue'
import { Avatar, Lock, View, Hide } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { validatePassword, validateUsername } from './rules'
// 登录验证表单 elment-plus需要关注如下几点
/*
1. el-form绑定model属性
2. el-form绑定rules属性
3. el-form-item绑定prop属性
*/

// model数据源
const loginForm = ref({
    username:'super-admin',
    password:'12345'
})


// 验证属性
const loginRules = ref({
    username:[
        {
            required:true,
            // 鼠标移出事件
            trigger: 'blur',
            message:'用户名为必填项',
            validator:validateUsername
        }
    ],
    password:[
        {
            required:true,
            // 鼠标移出事件
            trigger: 'blur',
            // 密码验证规则为自定义
            validator:validatePassword
        }
    ]
})

// 处理密码显示隐藏及icon图标变化
const pwdType = ref("password")
const onChangePwdType = ()=> {
    // 点击眼睛开放图标后,密码明文显示,眼睛图标变为关闭状态; 同理反之
    console.log("进入showPassword函数");
    if (pwdType.value === "password") {
        pwdType.value = "text"
    } else {
        pwdType.value = "password"
    }
}

</script>


<style lang="scss" scoped>

// 定义颜色
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray:#eee;
$cursou: #fff;

.login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .login-form {
        position: relative;
        // diaplay:默认水inner-block设置width不生效,需要换成block
        width: 520px;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
        display: block;
        // 父组件中设置el子组件的样式,需要用到::v-deep属性
        ::v-deep .el-form-item  {
            border: 1px solid rgba(255,255,255,0.1);
            background-color: rgba(0,0,0,0.1);
            border-radius: 5px;
            color:#454545;
        }
        ::v-deep .el-input {
            display: inline-block;
            height: 47px;
            width: 85%;

            input {
                height: 47px;
                background: transparent;
                border: none;
                border-radius: 0px;
                padding: 12px 5px 12px 15px;
                // color:$light_gray;
                caret-color: $cursou;
            }

            .el-input__wrapper{
                display: flex;
                padding: 0px;
                background-color:$bg;
                // 去除输入框的边框
                border: none;
                // 去除输入框的透明度
                box-shadow: none;
            }
        }
    }
    
    .svg-container {
        padding: 6px 5px 6px 15px;
        color: $dark_gray;
        // 垂直对齐方式
        vertical-align: middle;
        // display: inline-block; svg垂直居中不生效
        display: flex;
    }

    .title-container {
        position: relative;

        .title {
            font-size: 26px;
            color: $light_gray;
            margin: 0px auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
    }

    .show-pwd {
        position: absolute;
        right: 10px;
        top:7px;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
        user-select: none;
    }
}

</style>